<!--  -->
<template>
  <div>
    <van-field
      readonly
      clickable
      name="datetimePicker"
      :value="date"
      label="出生日期"
      placeholder="请选择出生日期"
      @click="showPicker = true"
      :rules="[{ required: true, message: '请选择出生日期' }]"
    />
    <van-popup v-model="showPicker" position="bottom" get-container="body">
      <van-datetime-picker
        v-model="pickerValue"
        :min-date="minDate"
        type="date"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      date: "",
      pickerValue: new Date(),
      showPicker: false,
      minDate: new Date(1900, 0, 1)
    };
  },
  props: ["value"],
  watch: {
    value(val) {
      //   this.pickerValue = new Date(val);
      this.date = val;
    }
  },
  //方法集合
  methods: {
    onConfirm(time) {
      this.$emit("input", this.formatDate(time));
      this.date = this.formatDate(time);
      this.showPicker = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    }
  },
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss' scoped>
</style>